<script lang="ts" setup>
import { onMounted, onUnmounted, reactive, ref, watch } from "vue"
import { useRoute } from "vue-router";
import { requestVideoPlayAddress, requestVideoDetail, requestVideoAllComment, requestSongListHotCom, requestRelatedVideo } from "../../utils/axiosURL"
import indexText from "./index.json"
const route = useRoute()

// 动态路由id
const videoID = ref<string | any>(route.params.id)
// 播放视频的地址
let playVideoAddress = ref<string>('')
// 存储视频详情数据
let videoDetailData = reactive<any>({})
// 描述信息状态
let descState = ref<boolean>(false)
// 推荐文案容器实例
let copyWritingState = ref<any>(false)
// emoji显示状态
let emojiShowState = ref<boolean>(false)
// 文本域内容
let ctnTextArea = ref<string>('')
// emoji容器实例
const emojiExample = ref<any>(null)
// 推荐文案实例
const copyWritingExample = ref<any>(null)
// prompt 组件显示状态
let promptState = ref<any>(false)
// 清除定时器
let timer = ref<any>(null)
// mv 热评
let mvHotComment = reactive<any>([])
// 所有评论的长度
const allCommentLength = ref<any>(0)
// 请求mv所有评论的页码
let allCommentPage = ref<any>(1)
// 存储所有评论数据
let saveAllMVCommentData = reactive<any>([])
// 相关推荐视频数据
let relatedMVData = reactive<any>([])


// 切换emoji容器的显示状态
const changeEmojiFn = () => {
  copyWritingState.value = false
  emojiShowState.value = !emojiShowState.value
}
// 切换推荐文案容器状态
const changeCopyWritingFn = () => {
  emojiShowState.value = false
  copyWritingState.value = !copyWritingState.value
}
// 拿取emoji
const getEmoji = (index: number) => ctnTextArea.value += emojiExample.value.children[index].innerHTML
// 文案点击事件函数
const copyWritingFn = (index: number) => ctnTextArea.value += copyWritingExample.value.children[index].innerHTML
// 提交评论事件处理函数
const submitCommentFn = () => {
  if (ctnTextArea.value === '') {
    promptState.value = true
    clearTimeout(timer)
    timer = setTimeout(() => { promptState.value = false }, 1500)
  }
}

// 更新分页评论
const changePages = () => requestVideoAllCommentFn()

// 请求视频播放地址
const requestVideoPlayAddressFn = () => {
  requestVideoPlayAddress(videoID.value).then((data: any) => {
    playVideoAddress.value = data.urls[0].url
  }).catch(_ => { })
}

// 请求视频详情
const requestVideoDetailFn = () => {
  requestVideoDetail(videoID.value).then(({ data }: any) => {
    videoDetailData.values = data
  }).catch(_ => { })
}

// 请求视频所有评论
const requestVideoAllCommentFn = () => {
  requestVideoAllComment(videoID.value, allCommentPage.value).then((data: any) => {
    saveAllMVCommentData.values = data.comments
    allCommentLength.value = data.total
  }).catch(err => {
    console.log(err)
  })
}

// 请求视频的热门评论
const requestSongListHotComFn = () => {
  requestSongListHotCom(videoID.value, 0, 5).then((data: any) => {
    mvHotComment.values = data.hotComments
  }).catch(_ => { })
}

// 请求相关视频
const requestRelatedVideoFn = () => {
  requestRelatedVideo().then((data: any) => {
    relatedMVData.values = data.datas
  }).catch(_ => { })
}

watch(videoID, () => {
  requestVideoPlayAddressFn()
  requestVideoDetailFn()
  requestVideoAllCommentFn()
  requestSongListHotComFn()
  requestRelatedVideoFn()
})

onMounted(() => {
  requestVideoPlayAddressFn()
  requestVideoDetailFn()
  requestVideoAllCommentFn()
  requestSongListHotComFn()
  requestRelatedVideoFn()
})

// 播放推荐 mv
const playRelatedMV = (id: number) => videoID.value = id
// 监听页面点击事件隐藏emoji容器
window.addEventListener('click', () => emojiShowState.value = copyWritingState.value = false)
onUnmounted(() => { window.removeEventListener('click', () => { }) })

</script>

<template>
  <div class="VideoDetail">
    <div class="MVWrap">
      <video controls autoplay :src="playVideoAddress"></video>
    </div>
    <div v-if="JSON.stringify(videoDetailData.values) !== '{}'">
      <div class="headImgAndNickName">
        <img :src="videoDetailData.values?.coverUrl" alt="">
        <p>{{ videoDetailData.values?.creator?.nickname }}</p>
      </div>
      <div class="MVInfo">
        <p class="title">
          {{ videoDetailData.values?.title }}
          <span v-if="descState" @click="() => descState = !descState" class="iconfont icon-xiangshang"></span>
          <span v-else @click="() => descState = !descState" class="iconfont icon-xiasanjiaoxing"></span>
        </p>
        <p class="mores">
          <span>{{ indexText.publish }}: {{ videoDetailData.values?.publishTime }}</span>
          <span>{{ indexText.play }}: {{ videoDetailData.values?.praisedCount }}次</span>
        </p>
        <div class="tags">
          <button v-for="i in videoDetailData.values?.videoGroup">{{ i.name }}</button>
        </div>
      </div>
      <div v-if="descState" class="desc">{{ videoDetailData.values?.description }}</div>
      <div class="moresCount">
        <button>
          <span class="iconfont icon-dianzan"></span>
          {{ indexText.zan }}: {{ videoDetailData.values?.praisedCount }}
        </button>
        <button>
          <span class="iconfont icon-24gl-folderPlus"></span>
          {{ indexText.collect }}: {{ videoDetailData.values?.subscribeCount }}
        </button>
        <button>
          <span class="iconfont icon-fenxiang"></span>
          {{ indexText.share }}: {{ videoDetailData.values?.shareCount }}
        </button>
      </div>
    </div>
    <MVDetailInfoSkeleton v-else />
    <div class="comAndMoresMV">
      <div class="commentArea">
        <p class="titleArea">{{ indexText.commentNum }} ({{ videoDetailData.values?.commentCount }})</p>
        <div class="commentWrap">
          <div class="textArea">
            <textarea v-model="ctnTextArea" maxlength="140"></textarea>
          </div>
          <div class="moreWrap">
            <div class="leftWrap">
              <span class="iconfont icon-smile" :class="`${emojiShowState ? 'activeColor' : ''}`"
                @click.stop="changeEmojiFn"></span>
              <span class="iconfont icon-aite"></span>
              <span class="iconfont icon-hash" :class="`${copyWritingState ? 'activeColor' : ''}`"
                @click.stop="changeCopyWritingFn"></span>
            </div>
            <div class="rightWrap">
              <button @click="submitCommentFn">评论</button>
            </div>
            <div v-if="emojiShowState" class="emoji" ref="emojiExample">
              <span v-for="(item, index) in indexText.emoji" @click.stop="getEmoji(index)">{{ item }}</span>
            </div>
            <div class="recommendedCopy" v-if="copyWritingState">
              <p class="RecommendForYou">为你推荐</p>
              <ul ref="copyWritingExample">
                <li v-for="(item, index) in indexText.recommendCopy" @click="copyWritingFn(index)">{{ item }}</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="hotCommentList" v-if="mvHotComment.values.length">
          <p class="excellentComment">精彩评论</p>
          <commentItem v-if="mvHotComment.values.length" :commentData=mvHotComment.values />
          <commentItemSkeleton v-else v-for="item in 10" />
        </div>
        <div class="allCommentList" v-if="saveAllMVCommentData.values.length">
          <p class="allComTitle">全部评论</p>
          <commentItem v-if="saveAllMVCommentData.values.length" :commentData=saveAllMVCommentData.values />
          <commentItemSkeleton v-else v-for="item in 10" />
          <div class="paging">
            <el-pagination small background layout="prev, pager, next" :total="allCommentLength"
              v-model:current-page="allCommentPage" @current-change="changePages" />
          </div>
        </div>
      </div>
      <div class="moresMVArea">
        <p class="moreMVRecomment">{{ indexText.RelatedRecom }}</p>
        <div class="RelatedListItem" v-for="item in relatedMVData.values">
          <div class="relatedLeft">
            <img :src="item.data.coverUrl" alt="" @click="playRelatedMV(item.data.vid)">
            <div class="playcount">
              <span class="iconfont icon-24gl-play"></span>
              <span>{{ item.data.praisedCount }}</span>
            </div>
            <div class="timer">
              <songTime :songDuration=item.data.durationms />
            </div>
          </div>
          <div class="relatedRight">
            <p class="descTitle">{{ item.data.title }}</p>
            <RouterLink :to="{ path: '/userDetail', query: { id: item.data.artistId } }">
              <p class="authors">{{ item.data.creator.nickname }}</p>
            </RouterLink>
          </div>
        </div>
      </div>
    </div>
    <prompt v-if="promptState" :content=indexText.errorText :type=indexText.errorType />
  </div>
</template>

<style lang="scss" scoped>
.VideoDetail {
  @extend .pageWrapSize;

  .MVWrap {
    width: 100%;
    height: 75%;
    background-color: #000;

    video {
      width: 100%;
      height: 100%;
    }
  }

  .headImgAndNickName {
    display: flex;
    align-items: center;
    width: 100%;
    height: 60px;
    margin-top: 20px;
    padding-left: 30px;
    box-sizing: border-box;

    img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
    }

    >p {
      font-size: $font-size-sm;
      font-family: $textFont;
      color: $font_main_color;
      margin-left: 10px;
    }
  }

  .MVInfo {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 20px 0 0 30px;
    height: 100px;

    .title {
      font-size: $font-size-lg2;
      font-family: $activeTextFont;
    }

    .mores {
      font-size: $font-size-sm;
      font-family: $textFont;
      color: $font_second_color;

      span:nth-child(2) {
        margin-left: 30px;
      }
    }

    .tags {
      button {
        @extend .clearButton;
        background-color: rgb(247, 247, 247);
        padding: 4px 8px;
        border-radius: 25px;
        margin-right: 20px;
        font-size: 14px;
      }
    }
  }

  .desc {
    margin-left: 30px;
    line-height: 30px;
    font-size: $font-size-sm;
    font-family: $textFont;
    color: $font_main_color;
    margin-top: 20px;
  }

  .moresCount {
    margin: 20px 0 0 30px;

    button {
      @extend .clearButton;
      border: 1px solid $lineColor;
      padding: 6px 20px;
      border-radius: 25px;
      margin-right: 20px;

      &:hover {
        background-color: rgb(247, 247, 247);
      }
    }
  }

  .comAndMoresMV {
    display: flex;
    width: 100%;
    margin-top: 30px;

    .commentArea {
      width: 65%;
      padding: 0 10px 0 30px;
      box-sizing: border-box;

      .titleArea {
        font-family: $activeTextFont;
        font-size: $font-size-lg;
        margin-bottom: 10px;
      }

      .commentWrap {
        width: 100%;
        height: 120px;

        .textArea {
          position: relative;
          width: 100%;
          height: 80px;

          textarea {
            width: 100% !important;
            height: 100% !important;
            padding: 4px 8px;
            outline: none;
            border: 1.5px solid $lineColor;
            box-sizing: border-box;
            border-radius: $borderRadius8;
            font-size: $font-size-xs;
            font-family: $textFont;
          }

          &::before {
            content: "140";
            position: absolute;
            right: 3px;
            bottom: 3px;
            width: 20px;
            font-size: $font-size-xs;
            font-family: $textFont;
            color: $font_second_color;
            background: #fff;
          }
        }

        .moreWrap {
          position: relative;
          display: flex;
          width: 100%;
          height: 40px;

          .leftWrap {
            flex-basis: 90px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            span {
              color: $font_second_color;
              font-size: $font-size-lg;

              &:hover {
                color: $font_main_color;
              }
            }

            .activeColor {
              color: $font_second_color !important;
            }
          }

          .rightWrap {
            flex: 1;
            display: flex;
            justify-content: end;
            align-items: center;

            button {
              @extend .clearButton;
              width: 60px;
              height: 30px;
              border-radius: 25px;
              border: 1px solid $lineColor;
            }
          }

          .emoji {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            position: absolute;
            top: 40px;
            left: 0;
            width: 375px;
            padding: 8px;
            box-sizing: border-box;
            box-shadow: 0px 0px 8px 0px rgb(230, 230, 230);
            border-radius: 6px;
            background-color: #fff;

            span {
              margin: 0 10px 10px 0;
            }

            &::after {
              content: "×";
              position: absolute;
              top: 0;
              right: 0;
              width: 20px;
              height: 20px;
              text-align: center;
              color: $font_second_color;
            }
          }

          .recommendedCopy {
            position: absolute;
            top: 40px;
            left: 72px;
            width: 285px;
            box-shadow: 0px 0px 8px 0px rgb(230, 230, 230);
            border-radius: 6px;
            background-color: #fff;

            .RecommendForYou {
              color: $font_second_color;
              font-size: $font-size-sm;
              padding-left: 15px;
              box-sizing: border-box;
              line-height: 35px;
              box-shadow: 0px 1px 2px 0 rgb(230, 230, 230);
            }

            ul {
              li {
                color: $font_second_color;
                font-size: $font-size-sm;
                padding-left: 15px;
                box-sizing: border-box;
                line-height: 35px;

                &:nth-child(1) {
                  background-color: rgb(250, 250, 250);
                }

                &:hover {
                  background-color: rgb(250, 250, 250);
                }
              }
            }
          }
        }
      }

      .hotCommentList {
        width: 100%;
        margin-top: 10px;

        .excellentComment {
          font-family: $activeTextFont;
        }

        .viewMore {
          display: flex;
          justify-content: center;
          margin-top: 40px;

          button {
            @extend .clearButton;
            border: 1px solid $lineColor;
            padding: 6px 20px;
            border-radius: 25px;
            cursor: pointer;
            font-size: $font-size-sm;

            span {
              vertical-align: -1px;
              font-size: $font-size-sm;
            }
          }
        }
      }

      .allCommentList {
        width: 100%;
        margin-top: 50px;

        .allComTitle {
          font-family: $activeTextFont;
        }

        .paging {
          display: flex;
          justify-content: center;
          width: 100%;
          margin-top: 50px;

          :deep(.number) {
            border-radius: 4px;
            font-family: $textFont;
            background-color: transparent;
            border: 1px solid $lineColor;

            &:hover {
              color: $font_main_color;
              background-color: $BK_GRAY;
            }
          }

          :deep(.is-active) {
            background-color: $theme-red;
            border-radius: 4px;

            &:hover {
              color: $theme-white;
              background-color: $theme-red;
            }
          }

          :deep(.btn-prev),
          :deep(.btn-next) {
            border-radius: 4px;
            border: 1px solid $lineColor;
            background-color: transparent;

            &:hover {
              color: $font_red_color;
              background-color: $BK_GRAY;
            }
          }

          :deep(.more) {
            border-radius: 4px;
            border: 1px solid $lineColor;
            background-color: transparent;

            &:hover {
              color: $font_red_color;
              background-color: $BK_GRAY;
            }
          }
        }
      }
    }

    .moresMVArea {
      width: 35%;
      height: 300px;

      .moreMVRecomment {
        font-family: $activeTextFont;
        line-height: 33px;
      }

      .RelatedListItem {
        display: flex;
        width: 100%;
        height: 80px;
        margin-bottom: 10px;

        .relatedLeft {
          position: relative;
          flex-basis: 130px;
          height: 100%;
          cursor: pointer;

          img {
            width: 100%;
            height: 100%;
            border-radius: 6px;
          }

          .playcount {
            position: absolute;
            top: 0px;
            right: 8px;

            span {
              color: $theme-white;
              font-size: $font-size-xs;
            }
          }

          .timer {
            position: absolute;
            bottom: 3px;
            right: 8px;
            font-size: $font-size-xs;
          }
        }

        .relatedRight {
          flex: 1;
          display: flex;
          justify-content: space-between;
          flex-direction: column;
          padding: 3px 0;
          box-sizing: border-box;
          margin-left: 5px;

          .descTitle {
            color: $font_main_color;
            font-family: $textFont;
            display: -webkit-box;
            /* 将对象作为弹性伸缩盒子模型显示 */
            -webkit-box-orient: vertical;
            /* 设置或检索伸缩盒对象的子元素的排列方式 */
            -webkit-line-clamp: 2;
            /* 2行，只有 webkit内核支持 */
            word-break: break-all;
            /* 纯英文换行 */
            overflow: hidden;
            font-size: $font-size-sm;
          }

          .authors {
            color: $font_second_color;
            font-size: $font-size-xs;
            display: -webkit-box;
            /* 将对象作为弹性伸缩盒子模型显示 */
            -webkit-box-orient: vertical;
            /* 设置或检索伸缩盒对象的子元素的排列方式 */
            -webkit-line-clamp: 2;
            /* 2行，只有 webkit内核支持 */
            word-break: break-all;
            /* 纯英文换行 */
          }
        }
      }
    }
  }
}
</style>
